Työkaluvihjeiden Toteutus: Saavutettavaa Tietoa Hiirellä Osoittamalla ja Kohdistamalla

Työkaluvihjeet ovat pieniä, asiayhteyteen sidottuja ohjeviestejä, jotka ilmestyvät, kun käyttäjä vie hiiren osoittimen elementin päälle tai kohdistaa siihen. Ne voivat tarjota lisätietoa, selventää elementin tarkoitusta tai antaa vinkkejä ominaisuuden käyttöön. Työkaluvihjeistä voi kuitenkin helposti tulla saavutettavuuspainajaisia, jos niitä ei toteuteta oikein. Tämä opas esittelee parhaat käytännöt sellaisten työkaluvihjeiden luomiseen, jotka ovat kaikkien, myös vammaisten käyttäjien, käytettävissä.

Miksi Saavutettavuus on Tärkeää Työkaluvihjeissä

Saavutettavuus ei ole vain vaatimusten noudattamista; se on paremman käyttökokemuksen luomista kaikille. Kun työkaluvihjeet eivät ole saavutettavia, se voi sulkea ulkopuolelle käyttäjiä, jotka tukeutuvat avustaviin teknologioihin, kuten ruudunlukijoihin, näppäimistönavigointiin tai puhesyötteeseen. Harkitse näitä skenaarioita:

• Ruudunlukijan käyttäjät: Jos työkaluvihjettä ei ole merkitty oikein, ruudunlukija ei ehkä ilmoita sen olemassaolosta tai sisällöstä.
• Näppäimistön käyttäjät: Jos työkaluvihje ilmestyy vain hiiren osoituksella (hover), näppäimistön käyttäjät eivät pääse siihen käsiksi.
• Käyttäjät, joilla on motorisia rajoitteita: Hiiren osoitukseen vaadittavat tarkat liikkeet voivat olla haastavia tai mahdottomia.
• Käyttäjät, joilla on kognitiivisia vammoja: Huonosti ajoitettu tai sekava työkaluvihje voi aiheuttaa turhautumista ja haitata ymmärtämistä.

Noudattamalla saavutettavuuden parhaita käytäntöjä voimme varmistaa, että työkaluvihjeet parantavat eivätkä heikennä kaikkien käyttäjäkokemusta.

Keskeiset Periaatteet Saavutettaville Työkaluvihjeille

Seuraavat periaatteet ovat ratkaisevan tärkeitä saavutettavien työkaluvihjeiden luomisessa:

1. Tarjoa vaihtoehtoinen käyttötapa: Varmista, että työkaluvihjeet ovat käytettävissä sekä hiirellä osoittamalla että näppäimistöllä kohdistamalla.
2. Käytä ARIA-attribuutteja: Käytä ARIA-attribuutteja (Accessible Rich Internet Applications) tunnistaaksesi ja kuvaillaksesi työkaluvihjeet oikein avustaville teknologioille.
3. Hallitse kohdistusta: Kontrolloi, minne kohdistus siirtyy, kun työkaluvihje näytetään ja piilotetaan.
4. Varmista riittävä kontrasti: Tarjoa riittävä värikontrasti työkaluvihjeen tekstin ja taustan välillä.
5. Anna riittävästi aikaa: Anna käyttäjille tarpeeksi aikaa lukea työkaluvihjeen sisältö.
6. Tee niistä hylättäviä: Tarjoa selkeä tapa hylätä työkaluvihje.
7. Vältä ylikäyttöä: Käytä työkaluvihjeitä säästeliäästi ja vain tarvittaessa.

Toteutustekniikat

1. Hover- ja Focus-tilojen Käyttö

Saavutettavien työkaluvihjeiden kriittisin näkökohta on varmistaa, että ne ovat käytettävissä sekä hiiren että näppäimistön käyttäjille. Tämä tarkoittaa, että työkaluvihjeen tulisi ilmestyä sekä hiiren osoituksella että elementin saadessa kohdistuksen.

HTML:

            <a href="#" aria-describedby="tooltip-example">Esimerkkilinkki</a>
<div id="tooltip-example" role="tooltip" style="display: none;">Tämä on esimerkkityökaluvihje.</div>
            

              
                Copy
              
            
          

CSS:

            a:hover + div[role="tooltip"],
a:focus + div[role="tooltip"] {
  display: block;
  position: absolute;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  padding: 5px;
  z-index: 1000; /* Varmista, että työkaluvihje on päällimmäisenä */
}

            

              
                Copy
              
            
          

Selitys:

• aria-describedby: Tämä attribuutti linkittää linkin työkaluvihje-elementtiin sen ID:n avulla. Tämä kertoo avustaville teknologioille, että työkaluvihje tarjoaa lisätietoa linkistä.
• role="tooltip": Tämä ARIA-rooli tunnistaa elementin työkaluvihjeeksi.
• CSS käyttää viereisen sisaruksen valitsinta (+) näyttääkseen työkaluvihjeen, kun linkkiin osoitetaan hiirellä tai se kohdistetaan.

JavaScript (Edistynyt Hallinta - Valinnainen):

Vaikka CSS voi hoitaa yksinkertaisen näyttämisen/piilottamisen, JavaScript mahdollistaa vankemman hallinnan, erityisesti kun työkaluvihjeet luodaan dynaamisesti tai ne vaativat monimutkaisempaa toiminnallisuutta.

            const link = document.querySelector('a[aria-describedby="tooltip-example"]');
const tooltip = document.getElementById('tooltip-example');

link.addEventListener('focus', () => {
  tooltip.style.display = 'block';
});

link.addEventListener('blur', () => {
  tooltip.style.display = 'none';
});

link.addEventListener('mouseover', () => {
  tooltip.style.display = 'block';
});

link.addEventListener('mouseout', () => {
  tooltip.style.display = 'none';
});
            

              
                Copy
              
            
          

2. ARIA-attribuuttien Käyttö

ARIA-attribuutit ovat välttämättömiä semanttisen tiedon tarjoamiseksi avustaville teknologioille. Tässä erittely avainattribuuteista:

• aria-describedby: Kuten aiemmin mainittiin, tämä attribuutti luo suhteen laukaisevan elementin ja työkaluvihje-elementin välille.
• role="tooltip": Tämä attribuutti määrittelee elementin nimenomaisesti työkaluvihjeeksi.
• aria-hidden="true"/aria-hidden="false": Käytä näitä osoittamaan, onko työkaluvihje tällä hetkellä näkyvissä avustaville teknologioille. Kun työkaluvihje on piilotettu, aseta aria-hidden="true". Kun se on näkyvissä, aseta aria-hidden="false". Tämä on erityisen tärkeää, kun käytät JavaScriptiä työkaluvihjeen näkyvyyden hallintaan.

Esimerkki:

            <button aria-describedby="help-tooltip">Lähetä</button>
<div id="help-tooltip" role="tooltip" aria-hidden="true">Napsauta tästä lähettääksesi lomakkeen.</div>
            

              
                Copy
              
            
          

JavaScript (aria-hidden-attribuutille):

            const button = document.querySelector('button[aria-describedby="help-tooltip"]');
const tooltip = document.getElementById('help-tooltip');

button.addEventListener('focus', () => {
  tooltip.setAttribute('aria-hidden', 'false');
  tooltip.style.display = 'block';
});

button.addEventListener('blur', () => {
  tooltip.setAttribute('aria-hidden', 'true');
  tooltip.style.display = 'none';
});

button.addEventListener('mouseover', () => {
  tooltip.setAttribute('aria-hidden', 'false');
  tooltip.style.display = 'block';
});

button.addEventListener('mouseout', () => {
  tooltip.setAttribute('aria-hidden', 'true');
  tooltip.style.display = 'none';
});
            

              
                Copy
              
            
          

3. Kohdistuksen Hallinta

Kun työkaluvihje ilmestyy, sen ei yleensä *pitäisi* viedä kohdistusta laukaisevalta elementiltä. Kohdistuksen tulisi pysyä elementissä, joka laukaisi työkaluvihjeen. Tämä varmistaa, että näppäimistön käyttäjät voivat jatkaa sivun selaamista ilman odottamattomia keskeytyksiä.

Voi kuitenkin olla tilanteita, joissa *haluat* siirtää kohdistuksen työkaluvihjeeseen, erityisesti jos työkaluvihje sisältää interaktiivisia elementtejä (esim. linkkejä, painikkeita). Tässä tapauksessa varmista, että:

• Työkaluvihje on visuaalisesti erottuva osoittaakseen, että sillä on kohdistus.
• On olemassa selkeä tapa palauttaa kohdistus alkuperäiseen laukaisevaan elementtiin (esim. sulkemispainike työkaluvihjeen sisällä).

Useimmissa tapauksissa on suositeltavaa välttää kohdistuksen hallintaa työkaluvihjeen sisällä yksinkertaisuuden ja käytettävyyden vuoksi.

4. Riittävän Kontrastin Varmistaminen

Värikontrasti on ratkaisevan tärkeä luettavuuden kannalta. Varmista, että työkaluvihjeiden tekstin värillä on riittävä kontrasti taustaväriä vasten. Verkkosisällön saavutettavuusohjeet (WCAG) suosittelevat vähintään 4.5:1 kontrastisuhdetta normaalille tekstille ja 3:1 suurelle tekstille (18pt tai 14pt lihavoituna).

Käytä online-kontrastintarkistimia varmistaaksesi, että värivalintasi täyttävät saavutettavuusstandardit. Esimerkkejä kontrastintarkistimista:

• WebAIM Contrast Checker: https://webaim.org/resources/contrastchecker/
• Coolors: https://coolors.co/contrast-checker

Esimerkki (Hyvä Kontrasti):

            .tooltip {
  background-color: #000;
  color: #fff;
}

            

              
                Copy
              
            
          

Esimerkki (Huono Kontrasti):

            .tooltip {
  background-color: #fff;
  color: #eee;
}

            

              
                Copy
              
            
          

5. Riittävän Ajan Antaminen

Käyttäjät tarvitsevat tarpeeksi aikaa lukea työkaluvihjeen sisältö. Vältä työkaluvihjeitä, jotka katoavat liian nopeasti. Vaikka maagista lukua ei ole, pyri vähintään muutaman sekunnin näyttöaikaan. Lisäksi työkaluvihjeen tulisi pysyä näkyvissä niin kauan kuin käyttäjä osoittaa hiirellä laukaisevaa elementtiä tai on kohdistanut siihen. Jos joudut hylkäämään työkaluvihjeen muiden tapahtumien vuoksi, anna merkki siitä, että työkaluvihje sulkeutuu.

Jos työkaluvihjeen sisältö on pitkä, harkitse tavan tarjoamista käyttäjälle hylätä työkaluvihje manuaalisesti (esim. sulkemispainike tai Escape-näppäimen painaminen).

6. Hylättävyyden Mahdollistaminen

Vaikka työkaluvihjeet usein katoavat automaattisesti, kun käyttäjä siirtää hiiren pois tai poistaa kohdistuksen, on hyvä käytäntö tarjota selkeä tapa hylätä ne manuaalisesti, erityisesti pitkien työkaluvihjeiden tai interaktiivisia elementtejä sisältävien työkaluvihjeiden kohdalla.

Tapoja Työkaluvihjeiden Hylkäämiseen:

• Sulkemispainike: Sisällytä visuaalisesti näkyvä sulkemispainike työkaluvihjeeseen.
• Escape-näppäin: Salli käyttäjien hylätä työkaluvihje painamalla Escape-näppäintä.
• Napsautus ulkopuolella: Hylkää työkaluvihje, kun käyttäjä napsauttaa missä tahansa työkaluvihjeen ja laukaisevan elementin ulkopuolella. (Käytä varoen, koska se voi olla häiritsevää).

Esimerkki (Sulkemispainike):

            <div id="my-tooltip" role="tooltip" aria-hidden="true">
  Tämä on työkaluvihjeeni sisältö.
  <button onclick="hideTooltip()">Sulje</button>
</div>
            

              
                Copy
              
            
          

Esimerkki (Escape-näppäin):

            document.addEventListener('keydown', function(event) {
  if (event.key === 'Escape') {
    hideTooltip(); // Korvaa omalla työkaluvihjeen piilotusfunktiolla
  }
});

            

              
                Copy
              
            
          

7. Ylikäytön Välttäminen

Työkaluvihjeitä tulisi käyttää säästeliäästi ja vain silloin, kun ne tarjoavat todella hyödyllistä tietoa. Työkaluvihjeiden ylikäyttö voi sotkea käyttöliittymää, häiritä käyttäjiä ja luoda turhauttavan kokemuksen.

Vaihtoehtoja Työkaluvihjeille:

• Selkeät nimikkeet: Käytä selkeitä ja kuvaavia nimikkeitä (labeleita) lomakekentille, painikkeille ja linkeille.
• Kontekstuaalinen ohje: Tarjoa ohjetekstiä suoraan käyttöliittymässä, lähellä asiaankuuluvia elementtejä.
• Ohjedokumentaatio: Linkitä kattavaan ohjedokumentaatioon monimutkaisempia ominaisuuksia varten.

Edistyneitä Huomioita

Dynaaminen Sisältö

Jos työkaluvihjeesi sisältö luodaan dynaamisesti (esim. ladataan API:sta tai päivitetään käyttäjän syötteen perusteella), varmista, että aria-describedby-attribuutti ja työkaluvihjeen näkyvyys päivitetään vastaavasti. Käytä JavaScriptiä näiden päivitysten hallintaan.

Sijoittelu

Harkitse huolellisesti työkaluvihjeidesi sijoittelua. Vältä sijoittamasta niitä tavalla, joka peittää tärkeää sisältöä tai aiheuttaa asettelun siirtymiä. Ota huomioon eri näyttökoot ja resoluutiot ja käytä CSS:ää varmistaaksesi, että työkaluvihjeet ovat aina näkyvissä näkymäalueella.

Mobiililaitteet

Työkaluvihjeet perustuvat perinteisesti hiiren osoitus-interaktioihin, jotka eivät ole käytettävissä kosketuspohjaisilla laitteilla. Mobiililaitteille harkitse vaihtoehtoisia vuorovaikutusmenetelmiä, kuten:

• Napautus: Näytä työkaluvihje, kun käyttäjä napauttaa elementtiä.
• Pitkä painallus: Näytä työkaluvihje, kun käyttäjä painaa elementtiä pitkään.
• Näytä kohdistettaessa: Näytä, kun elementti saa kohdistuksen. Tämä voidaan saavuttaa JavaScriptillä tarkistamalla kosketustuki (esim. ('ontouchstart' in window)) ja muuttamalla näyttökäyttäytymistä vastaavasti.

Työkaluvihjeiden Testaaminen

Testaa työkaluvihjeesi perusteellisesti varmistaaksesi, että ne ovat kaikkien käyttäjien saavutettavissa. Käytä yhdistelmää manuaalista testausta ja automaattisia saavutettavuuden testausvälineitä.

Testausmenetelmät:

• Näppäimistönavigointi: Varmista, että työkaluvihjeet ovat käytettävissä näppäimistöllä.
• Ruudunlukijatestaus: Käytä ruudunlukijaa varmistaaksesi, että työkaluvihjeet ilmoitetaan oikein.
• Värikontrastianalyysi: Käytä värikontrastin tarkistinta riittävän kontrastin varmistamiseksi.
• Mobiilitestaus: Testaa työkaluvihjeitä eri mobiililaitteilla ja näyttöko'oilla.
• Automaattinen saavutettavuustestaus: Käytä työkaluja kuten axe DevTools, WAVE tai Lighthouse mahdollisten saavutettavuusongelmien tunnistamiseen.

Kansainvälistäminen (i18n) ja Lokalisointi (l10n)

Kun kehität työkaluvihjeitä maailmanlaajuiselle yleisölle, pidä mielessä kansainvälistäminen ja lokalisointi:

• Tekstin suunta: Tue sekä vasemmalta oikealle (LTR) että oikealta vasemmalle (RTL) -tekstisuuntia. Käytä asettelussa CSS:n loogisia ominaisuuksia (esim. margin-inline-start, margin-inline-end) fyysisten ominaisuuksien (esim. margin-left, margin-right) sijaan.
• Kielikohtaiset käännökset: Tarjoa työkaluvihjeen sisällöstä käännökset eri kielille.
• Päivämäärä- ja aikamuodot: Mukauta päivämäärä- ja aikamuodot käyttäjän paikallisasetusten mukaan.
• Numeroformaatit: Käytä sopivia numeroformaatteja eri alueille (esim. desimaalierottimet, tuhaterottimet).

Yhteenveto

Saavutettavien työkaluvihjeiden toteuttaminen vaatii huolellista suunnittelua ja yksityiskohtien huomioimista. Noudattamalla tässä oppaassa esitettyjä periaatteita ja tekniikoita voit luoda työkaluvihjeitä, jotka ovat kaikkien käytettävissä heidän kyvyistään riippumatta. Muista, että saavutettavuus on jatkuva prosessi, joten jatka työkaluvihjeidesi testaamista ja hiomista varmistaaksesi, että ne vastaavat kaikkien käyttäjiesi tarpeita.

Resurssit

• ARIA Authoring Practices Guide (APG) - Työkaluvihje
• Web Content Accessibility Guidelines (WCAG) 2.1
• MDN Web Docs - ARIA